<template>
    <!-- 1. 用户信息展示区域（基于 runner 表字段） -->
    <div class="user-info-card">
      <!-- 加载中状态 -->
      <div v-if="loading" class="loading">加载用户信息中...</div>
      
      <!-- 信息加载失败 -->
      <div v-else-if="error" class="error-text">{{ error }}</div>
      
      <!-- 用户信息展示（对应 runner 表字段：real_name、runner_account、id_card 等） -->
      <div v-else class="info-content">
        <h3 class="card-title">个人信息</h3>
        <div class="info-item">
          <span class="label">用户名：</span>
          <span class="value">{{ user.runner_account }}</span>
        </div>
        <div class="info-item">
          <span class="label">真实姓名：</span>
          <span class="value">{{ user.real_name }}</span>
        </div>
        <div class="info-item">
          <span class="label">身份证号：</span>
          <span class="value">{{ formatIdCard(user.id_card) }}</span> <!-- 身份证号脱敏 -->
        </div>
        <div class="info-item">
          <span class="label">银行卡号：</span>
          <span class="value">{{ user.bank_card_no ? formatBankCard(user.bank_card_no) : '未绑定' }}</span> <!-- 银行卡脱敏 -->
        </div>
        <div class="info-item">
          <span class="label">审核状态：</span>
          <span class="status-tag" :class="getStatusClass(user.audit_status)">
            {{ getStatusText(user.audit_status) }}
          </span>
        </div>
        <!-- 退出登录按钮 -->
        <button @click="handleLogout" class="logout-btn">
          <i class="fa fa-sign-out mr-1"></i> 退出登录
        </button>
      </div>
    </div>
  </template>
  
  <script setup>
  // 1. 引入所需依赖
  import { onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import request from '@/utils/request'
  
  // 2. 定义响应式数据（用户信息、加载状态、错误信息）
  const user = ref(null)
  const loading = ref(true) // 加载中状态（优化用户体验）
  const error = ref('') // 错误信息（如接口请求失败）
  
  // 3. 路由实例（用于退出登录跳转）
  const router = useRouter()
  
  // 4. 页面挂载时获取用户信息（onMounted 钩子）
  onMounted(async () => {
    try {
      // 调用后端接口（获取当前登录跑腿员信息，需携带 Token）
      const res = await request.get('/runner/info')
      
      // 校验接口返回数据（防止后端返回异常）
      if (!res || !res.runner_id) {
        throw new Error('用户信息获取失败，请重新登录')
      }
      
      // 存储用户信息到响应式变量
      user.value = res
    } catch (err) {
      // 捕获错误（如 Token 过期、接口异常）
      error.value = err.message || '获取用户信息失败，请稍后重试'
      // 若为 Token 过期，自动跳转登录页
      if (err.response?.status === 401) {
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        router.push('/login')
      }
    } finally {
      // 无论成功/失败，都结束加载状态
      loading.value = false
    }
  })
  
  // 5. 退出登录逻辑（清除本地存储 + 跳转登录页）
  const handleLogout = () => {
    // 二次确认（避免误操作）
    if (confirm('确定要退出登录吗？')) {
      // 清除本地存储的 Token 和用户信息
      localStorage.removeItem('token')
      localStorage.removeItem('user')
      // 跳转到登录页
      router.push('/login')
    }
  }
  
  // 6. 工具函数：格式化身份证号（脱敏，如 110101********1234）
  const formatIdCard = (idCard) => {
    if (!idCard) return ''
    return idCard.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$3')
  }
  
  // 7. 工具函数：格式化银行卡号（脱敏，如 6222 **** **** 1234）
  const formatBankCard = (bankCard) => {
    if (!bankCard) return ''
    return bankCard.replace(/(\d{4})(?=\d)/g, '$1 **** ')
  }
  
  // 8. 工具函数：获取审核状态文本（对应 runner 表 audit_status 字段）
  const getStatusText = (status) => {
    const statusMap = {
      0: '待审核',
      1: '审核通过',
      2: '审核拒绝'
    }
    return statusMap[status] || '未知状态'
  }
  
  // 9. 工具函数：获取审核状态样式（不同状态显示不同颜色）
  const getStatusClass = (status) => {
    const classMap = {
      0: 'status-pending', // 待审核（灰色）
      1: 'status-approved', // 审核通过（绿色）
      2: 'status-rejected' // 审核拒绝（红色）
    }
    return classMap[status] || ''
  }
  </script>
  
  <style scoped>
  /* 1. 卡片容器样式 */
  .user-info-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin: 20px 0;
  }
  
  /* 2. 加载中/错误状态样式 */
  .loading, .error-text {
    text-align: center;
    padding: 30px 0;
    color: #666;
  }
  .error-text {
    color: #ef4444; /* 错误文本红色 */
  }
  
  /* 3. 信息内容样式 */
  .card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 10px;
  }
  
  .info-item {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
  }
  .label {
    width: 100px;
    color: #6b7280;
    font-size: 14px;
  }
  .value {
    flex: 1;
    color: #1f2937;
    font-size: 14px;
  }
  
  /* 4. 审核状态标签样式 */
  .status-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
  }
  .status-pending {
    background: #9ca3af; /* 待审核-灰色 */
  }
  .status-approved {
    background: #10b981; /* 审核通过-绿色 */
  }
  .status-rejected {
    background: #ef4444; /* 审核拒绝-红色 */
  }
  
  /* 5. 退出登录按钮样式 */
  .logout-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: background 0.3s;
  }
  .logout-btn:hover {
    background: #dc2626; /*  hover 加深红色 */
  }
  </style>